<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="员工ID" prop="id">
                <el-input v-model="ruleForm.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                    <el-radio v-model="ruleForm.status" label= "1" >录用</el-radio>
                    <el-radio v-model="ruleForm.status" label= "0" >停用</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即更新</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {updateEmployee} from '@/utils/requests.js'
    export default{
        props:['transid','transusername','transphone'],
        watch:{
            transid:{
                handler:function(newVal){
                    this.ruleForm.id = newVal
                },
                immediate:true,
                deep:true
            },
            transusername:{
                handler:function(newVal){
                    this.ruleForm.username = newVal
                },
                immediate:true,
                deep:true
            },transphone:{
                handler:function(newVal){
                    this.ruleForm.phone = newVal
                },
                immediate:true,
                deep:true
            }
        },
        data() {
            // 验证手机号
            var validateMobilePhone = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('负责人手机号不可为空'));
                } else {
                    let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/);
                    if (!reg.test(value)) {
                        callback(new Error('请输入有效的手机号码'));
                        return;
                    }
                    callback();
                }
            }
            return {
                ruleForm: {
                    id:'',
                    username: '',
                    phone: '',
                    status: '1',
                },
                rules: {
                    id:[
                        {required:false}
                    ],
                    username: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { validator:validateMobilePhone, trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择一种销售状态', trigger: 'change' }
                    ],
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        updateEmployee(this.ruleForm).then((res)=>{
                            if(res.statusCode == 200){
                                this.$message({
                                    showClose:true,
                                    message:res.message,
                                    type:'success'
                                })
                            }else{
                                this.$message({
                                    showClose:true,
                                    message:res.message,
                                    type:'error'
                                })
                            }
                        })
                        setTimeout(() => {
                            // 表单提交事件触发后自动触发父组件中的change
                            this.$emit('change',false)
                        }, 2000);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>